import { Card, Row, Col, DatePicker, Table, Form } from 'antd';
import React, { Component }from 'react';

import styles from '../style.less';

import moment from 'moment'


const columns = [
  {
    title: '领导名称',
    dataIndex: 'name',
  },
  {
    title: '所在街道',
    dataIndex: 'street',
  },
  {
    title: '走访次数',
    dataIndex: 'number',
    width: 150,
  },
]


class LeaderTable extends Component {
    state = {
        data: this.props.data
    }

    componentDidMount = () => {
        this.init()
    }
    
    init = () => {
        const [...newList] = this.props.data
        const streetArray = []
        const obj = {}
        const rednderArray = []
        newList.forEach(val => {
            if (!streetArray.includes((val.leader + val.street))) {
                streetArray.push((val.leader + val.street))
                obj[(val.leader + val.street)] = {
                  name: val.leader,
                  street: val.street,
                  number: 0
                }
            }
            obj[(val.leader + val.street)].number += 1
        })
        Object.keys(obj).forEach(key => {
            rednderArray.push({
                street: obj[key].street,
                number: obj[key].number,
                name: obj[key].name,
            })
        })
        this.setState({
            data: rednderArray
        })
    }

    search = date => {
        const start = moment(date[0]).valueOf()
        const end = moment(date[1]).valueOf()
        const [...newList] = this.props.data
        const streetArray = []
        const obj = {}
        const rednderArray = []
        newList.forEach(val => {
            if (val.date >= start && val.date <= end && start !== end) {
                if (!streetArray.includes((val.leader + val.street))) {
                    streetArray.push((val.leader + val.street))
                    obj[(val.leader + val.street)] = {
                      name: val.leader,
                      street: val.street,
                      number: 0
                    }
                }
                obj[(val.leader + val.street)].number += 1
            }
            if (val.date >= start && start === end && val.date < (start + 86400000)) {
                if (!streetArray.includes((val.leader + val.street))) {
                    streetArray.push((val.leader + val.street))
                    obj[(val.leader + val.street)] = {
                      name: val.leader,
                      street: val.street,
                      number: 0
                    }
                }
                obj[(val.leader + val.street)].number += 1
            }
        })
        Object.keys(obj).forEach(key => {
            rednderArray.push({
                street: obj[key].street,
                number: obj[key].number,
                name: obj[key].name,
            })
        })
        this.setState({
            data: rednderArray
        })
    }


    render () {

        return (
            <>
                <Card 
                className={styles.salesCardTitle}
                bordered={false}
                bodyStyle={{
                    margin: 2,
                    padding: '15px 28px'
                }}
                >
                
                <Row type="flex" justify="space-between">
                    <Col>
                    领导走访统计
                    </Col>
                    <Col>
                        <DatePicker.RangePicker onChange={(date, dateString) => this.search(date, dateString)}/>
                    </Col>
                </Row>
                </Card>
                <Card bordered={false}>
                    <Table
                        columns={columns}
                        dataSource={this.state.data}
                        pagination={{
                        size: "small",
                        defaultPageSize: 10,
                        showQuickJumper: true,
                        showSizeChanger: true
                        }}
                        size="middle"
                        rowKey="uid"
                    />
                </Card>
            </>
        )
    }
}

const WrappedDynamicFieldSet = Form.create()(LeaderTable);

export default WrappedDynamicFieldSet
